<template>
  <div>
    <div style="display:flex;justify-content: space-between;padding:0 100px;position: absolute;top: 0;z-index: 9;width: 100%;background-color: rgba(255, 255, 255, 0.75)">
      <div style="height:80px;display:flex;align-items: center">
        <div>
          <img :src="baseURL_dev+companyInfo.companyLogUrl" alt="" style="width: 150px;height: 50px;">
        </div>
      </div>
      <div style="height:80px;display:flex;justify-content: center;align-items: center;width:1200px;">
        <div :class="activeIndex==index?'nav_act':'nav'" v-for="(item,index) in nav" @click="actNav(item,index)">
          <div v-if="item.children.length==0">{{ item.navigationName }}</div>
          <div v-if="item.children.length>0" style="z-index: 99999;display: flex; align-items: center;">
            <el-dropdown>
              <span :class="activeIndex==index?'nav_act':'nav'" style="">
                {{ item.navigationName }}
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="actNav(item2,index)" v-for="(item2,index2) in item.children" >{{ item2.navigationName }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div style="display: flex;align-items: center;">
        <div style="margin-right: 20px;">
          <el-link href="https://s.baoguane.com/#/login" target="_blank">报关系统</el-link>
        </div>
        <div>
          <el-link :href="companyInfo.linkAddressUrl" target="_blank">{{ companyInfo.linkName }}</el-link>
        </div>
      </div>
    </div>
    <div>
      <div class="block text-center" m="t-4" style="">
        <el-carousel trigger="click" height="500px">
          <el-carousel-item v-for="item in slideshowList" :key="item">
            <div class="carousel" :style="{'backgroundImage':'url('+item.url+')'}" @click="toLink(item)">
              <div style="font-size: 36px;font-weight: bold;">竭诚为您提供最佳解决方案</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>

    <!-- <el-tooltip placement="top">
      <template #content> multiple lines<br />second line </template>
      <el-button>Top center</el-button>
    </el-tooltip> -->

    <div style="position: fixed;top: 50%;right: 20px;width: 100px;background-color: #fff;box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);padding: 20px;">

      <el-tooltip placement="left" effect="light">
        <template #content>
          <img :src="baseURL_dev+wxUrl" style="width: 250px;height: 300px;">
        </template>
        <div style="height: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer; ">
          <div style="display: flex;flex-direction: column;align-items: center;">
            <div style="height: 45px;width: 45px;border-radius: 50%;background-color: #2dc041;display: flex;justify-content: center;align-items: center;">
              <el-icon style="color: #fff;font-size: 26px;"><Comment /></el-icon>
            </div>
            <div style="font-size: 14px;margin-top: 5px;">添加微信</div>
          </div>
        </div>
      </el-tooltip>

      <!-- <div style="height: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer; ">
        <div style="display: flex;flex-direction: column;align-items: center;">
          <div style="height: 45px;width: 45px;border-radius: 50%;background-color: #2dc041;display: flex;justify-content: center;align-items: center;">
            <el-icon style="color: #fff;font-size: 26px;"><Comment /></el-icon>
          </div>
          <div style="font-size: 14px;margin-top: 5px;">添加微信</div>
        </div>
      </div> -->


      <div style="height: 1px;width: 100%;border-bottom: 1px solid #d0d0d0;margin: 20px 0;"></div>
      <div style="height: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;" @click="toTop">
        <div style="display: flex;flex-direction: column;align-items: center;">
          <div style="height: 45px;width: 45px;border-radius: 50%;background-color: #017eff;display: flex;justify-content: center;align-items: center;">
            <el-icon style="color: #fff;font-size: 26px;"><CaretTop /></el-icon>
          </div>
          <div style="font-size: 14px;margin-top: 5px;">回到顶部</div>
        </div>
      </div>
    </div>
      <!-- </div> -->
    <!-- <el-container>
      <el-header>
        <div style="background-color:#67C23A">
          Header
        </div>
      </el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container> -->
  </div>
</template>

<script setup lang="ts">
import { onMounted,ref,watch } from 'vue'
import { useRouter, useRoute } from "vue-router";
import { $SlideshowList,$NavigationList,$CompanyInfo,$WechatQuery } from '../api/api'
import { baseURL_dev } from '../config/baseUrl'

onMounted(()=>{
  loadCompanyInfo()
  loadSlideshow()
  loadNavigationList()
  loadWechatQuery()
})

let wxUrl = ref('')

const loadWechatQuery = async ()=>{
  let ret = await $WechatQuery()
    console.log(ret)
    if(ret.code == 0){
      wxUrl.value = ret.rows[0].wechatImageUrl
    }
}

const loadCompanyInfo = async ()=>{
    let ret = await $CompanyInfo()
    console.log(ret)
    companyInfo.value = ret.rows
    console.log('companyInfo',companyInfo.value)
    sessionStorage.setItem('account',JSON.stringify(ret.rows))
  //   nav.value = ret.rows
  }

let slideshowList = ref('')

const loadNavigationList = async ()=>{
  let ret = await $NavigationList()
  console.log(ret)
  nav.value = ret.rows
}

const loadSlideshow = async ()=>{
  let ret = await $SlideshowList()
  console.log(ret)
  slideshowList.value = ret.rows
  for(var i=0;i<slideshowList.value.length;i++){
    slideshowList.value[i].url = baseURL_dev+slideshowList.value[i].slideshowImageUrl
  }
  console.log('slideshowList',slideshowList.value)
}
// import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const nav = ref([])
const companyInfo = ref({})
const activeIndex = ref('0')

const toLink = (item) => {
  window.open('http://'+item.slideshowSkipRoute)
}
// toLink(item){
//   window.location.href = item.slideshowSkipRoute
// }

const toTop = async() => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const toMyProduct = async (item,index) => {
  router.push('/myProduct')
}

const toMyService = async (item,index) => {
  router.push('/myService')
}

const actNav = async (item,index) => {
  console.log(index)
  activeIndex.value = index
  router.push(item.url)
}

// const actNavChild = async (item,index) => {
//   console.log(index)
//   activeIndex.value = index
//   router.push(item.url)
// }

</script>

<style scoped>
.carousel{
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
  background-size: 100% 100%;
  cursor: pointer;
  /* background-size: cover; */
}
.nav{
  display:flex;
  justify-content: center;
  width:150px;
  font-size:14px;
  cursor: pointer;
}
.nav_act{
  display:flex;
  justify-content: center;
  width:150px;
  font-size:14px;
  cursor: pointer;
  color: #256aff;
  font-weight: bold;
}
</style>